<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physics-canvas" width="500" height="380"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Define geometric parameters
        const centerX = 250;
        const centerY = 175;
        const R = 120; // Radius of the large sphere
        const r = 60;  // Radius of the small sphere (cavity)
        const c = 45;  // Distance between centers OO'

        const o_x = centerX;
        const o_y = centerY;
        const o_prime_x = centerX + c;
        const o_prime_y = centerY;
        
        const p_x = centerX - 60;
        const p_y = centerY;
        const p_prime_x = centerX - 160;
        const p_prime_y = centerY;

        // Helper function to draw an arrowhead
        function drawArrowHead(ctx, toX, toY, angle, headLength) {
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }

        // 1. Draw the shaded region (annulus)
        ctx.fillStyle = '#E8E8E8';
        ctx.beginPath();
        // Outer boundary (clockwise)
        ctx.arc(o_x, o_y, R, 0, 2 * Math.PI, false);
        // Inner boundary (counter-clockwise to create a hole)
        ctx.arc(o_prime_x, o_prime_y, r, 0, 2 * Math.PI, true);
        ctx.fill();

        // 2. Draw the outlines of the two spheres
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.beginPath();
        ctx.arc(o_x, o_y, R, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(o_prime_x, o_prime_y, r, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the central horizontal line
        ctx.beginPath();
        ctx.moveTo(p_prime_x - 30, centerY);
        ctx.lineTo(o_prime_x + r + 30, centerY);
        ctx.stroke();

        // 4. Draw the points P', P, O, O'
        const pointRadius = 2.5;
        ctx.fillStyle = 'black';
        
        [
            { x: p_prime_x, y: p_prime_y },
            { x: p_x, y: p_y },
            { x: o_x, y: o_y },
            { x: o_prime_x, y: o_prime_y }
        ].forEach(point => {
            ctx.beginPath();
            ctx.arc(point.x, point.y, pointRadius, 0, 2 * Math.PI);
            ctx.fill();
        });

        // 5. Draw radius R with arrow
        const angleR = 135 * Math.PI / 180; // Southwest direction
        const R_line_end_x = o_x + R * Math.cos(angleR);
        const R_line_end_y = o_y + R * Math.sin(angleR);
        ctx.beginPath();
        ctx.moveTo(o_x, o_y);
        ctx.lineTo(R_line_end_x, R_line_end_y);
        ctx.stroke();
        drawArrowHead(ctx, R_line_end_x, R_line_end_y, angleR, 10);
        
        // 6. Draw radius r with arrow
        const angle_r = 45 * Math.PI / 180; // Southeast direction
        const r_line_end_x = o_prime_x + r * Math.cos(angle_r);
        const r_line_end_y = o_prime_y + r * Math.sin(angle_r);
        ctx.beginPath();
        ctx.moveTo(o_prime_x, o_prime_y);
        ctx.lineTo(r_line_end_x, r_line_end_y);
        ctx.stroke();
        drawArrowHead(ctx, r_line_end_x, r_line_end_y, angle_r, 10);

        // 7. Add text labels
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        
        // Labels for points
        ctx.font = '20px Times New Roman';
        ctx.fillText("P'", p_prime_x, p_prime_y - 8);
        ctx.fillText('P', p_x, p_y - 8);
        ctx.fillText('O', o_x, o_y - 8);
        ctx.fillText("O'", o_prime_x, o_prime_y - 8);
        
        // Labels for radii (italic)
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('R', o_x + (R_line_end_x - o_x) * 0.5 - 10, o_y + (R_line_end_y - o_y) * 0.5 + 10);
        ctx.fillText('r', o_prime_x + (r_line_end_x - o_prime_x) * 0.5 + 10, o_prime_y + (r_line_end_y - o_prime_y) * 0.5 + 5);

        // 8. Add the caption
        ctx.font = '18px SimSun'; // A common font for Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 7-22 图', canvas.width / 2, canvas.height - 10);
    </script>
</body>
</html>